<template>
  <li @mouseenter="isShow=true" @mouseleave="isShow=false">
    <label>
      <input type="checkbox" v-model="selectTodoHandle"/>
      <span>{{todo.content}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="delOneHandle">删除</button>
  </li>

</template>

<script>
  export default {
    name: "TodoItem",
    props:['todo','selectTodo','delOneTodo'],
    data(){
      return {
        isShow:false
      }
    },
    computed:{
      selectTodoHandle:{
        get() {
          return this.todo.isDone
        },
        set() {
          // console.log(newVal)
          this.selectTodo(this.todo.id)
        }
      }
    },
    methods:{
      delOneHandle() {
        if(confirm(`您是否确定删除todo内容:'${this.todo.content}'?`)){
          this.delOneTodo(this.todo.id)
        }
      }
    }
  }
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  li:hover {
    background: #ccc;
  }
  li label {
    float: left;
    cursor: pointer;
  }
  
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  
  li button {
    float: right;
    /*display: none;*/
    margin-top: 3px;
  }
  
  li:before {
    content: initial;
  }
  
  li:last-child {
    border-bottom: none;
  }

</style>
